<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ include file="/WEB-INF/views/shared/taglib.jsp"%>

<%
	//获取路径
	String contextPath = request.getContextPath();
	String path = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort() + contextPath;
	//有几个事迹，目前最多5个，根据事迹个数判断时间轴5个位置
	int eventNum = relative.getEventNum();
	switch(eventNum){
	case 0:
		break;
	default:
		break;
	}
	
	//是否显示离世之后相关文字
	String alive_visibility = "hidden";
	boolean isAlive = relative.relative_alive;
	if(isAlive == false){
		alive_visibility = "visible";
	}else{
		alive_visibility = "hidden";
	}
%>
<!-- 拟定传来的实体类是relative.java, 传来events事件列表（ArrayList） -->

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- 1.此处匹配资料：姓名 -->
<title>${relative.getRelative_name()}</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]>
    <script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="<%=path%>/assets/css/main.css" />
<!--[if lte IE 9]>
    <link rel="stylesheet" href="<%=path%>/assets/css/ie9.css"/><![endif]-->
<!--[if lte IE 8]>
    <link rel="stylesheet" href="<%=path%>/assets/css/ie8.css"/><![endif]-->

<style>
#ifLeave {
	visibility: <%=alive_visibility%>
}
</style>
</head>
<body>

	<!-- Wrapper -->
	<div id="wrapper">

		<!-- Header -->
		<header id="header" class="alt">
		<h1>${relative.getRelative_name()}</h1>
		<h1></h1>
		<span class="logo"> <!-- 2.此处匹配资料：头像 --> <img
			src="${relative.getPhoto()}" alt="" />
		</span>
		<p>${relative.relative_information}</p>
		</header>

		<!-- Nav -->
		<nav id="nav">
		<ul>
			<li><a href="#header" class="active">首页</a></li>
			<li><a href="#event">事迹</a></li>
			<li><a href="#intro">简介</a></li>
			<li><a href="#comment">留言</a></li>
		</ul>
		</nav>

		<!-- Main -->
		<div id="main">

			<!-- 事迹：根据需要显示-->
			<section id="event" class="main">
			<div class="spotlight">
				<div class="content">
					<header class="major">
					<h2>生平事迹</h2>
					</header>


					<!-- 循环时间轴 -->
					<c:forEach var="event" items="${events}" varStatus="status">
						<div class="cd-timeline-block">
							<div class="cd-timeline-img first">
								<img src="<%=path%>/images/circle.svg" alt="1">
							</div>
							<div class="cd-timeline-content">
								<h2> 
									<%event.getEventInfo();%>
								</h2>
								<p>
									<%=event.getEventInfo()%>
								</p>
								<span class="cd-date"> <%=event.getEventDate()%>
								</span>
							</div>
						</div>
					</c:forEach>




					<!-- 时间轴 -->
					<section id="cd-timeline" class="cd-container">
					<div class="cd-timeline-block">
						<div class="cd-timeline-img first">
							<img src="<%=path%>/images/circle.svg" alt="1">
						</div>
						<div class="cd-timeline-content">
							<h2>进入古墓派</h2>
							<p>年幼时加入古墓派</p>
							<span class="cd-date">1888-01-06</span>
						</div>
					</div>
					<div class="cd-timeline-block">
						<div class="cd-timeline-img second">
							<img src="<%=path%>/images/circle.svg" alt="2">
						</div>

						<div class="cd-timeline-content">
							<h2>玉女剑法</h2>
							<p>学习玉女剑，天资过人</p>
							<span class="cd-date">1900-12-25</span>
						</div>
					</div>
					<div class="cd-timeline-block">
						<div class="cd-timeline-img third">
							<img src="<%=path%>/images/circle.svg" alt="3">
						</div>

						<div class="cd-timeline-content">
							<h2>杨过</h2>
							<p>叫我姑姑</p>
							<span class="cd-date">1902-12-20</span>
						</div>
					</div>
					<div class="cd-timeline-block">
						<div class="cd-timeline-img forth">
							<img src="<%=path%>/images/circle.svg" alt="4">
						</div>

						<div class="cd-timeline-content">
							<h2>金轮法王</h2>
							<p>双剑合璧</p>
							<span class="cd-date">2014-12-14</span>
						</div>
					</div>
					<div class="cd-timeline-block">
						<div class="cd-timeline-img fifth">
							<img src="<%=path%>/images/circle.svg" alt="5">
						</div>

						<div class="cd-timeline-content">
							<h2>离开</h2>
							<p>进入谷底，蜂翅刻字</p>
							<span class="cd-date">2014-12-05</span>
						</div>
					</div>
					</section>
				</div>
			</div>
			</section>

			<!-- 简介 -->
			<section id="intro" class="main"> <section id="intro-left">
			<header class="major">
			<h2>简介</h2>
			</header>
			<dl class="alt">
				<dt>姓名：</dt>
				<dd>${relative.getRelative_name}</dd>
				<dt>性别：</dt>
				<dd>${relative.relative_sex}</dd>
				<dt>职业：</dt>
				<dd>${relative.relative_job}</dd>
				<dt>籍贯：</dt>
				<dd>${relative.relative_province}，${relative.relative_city}</dd>
				<dt>生日：</dt>
				<dd>${relative.relative_birthday}</dd>
				<div id="ifLeave">
					<dt>逝日：</dt>
					<dd>${relative.relative_deathday}</dd>
					<dt>葬地：</dt>
					<dd>${relative.relative_buryAddress}</dd>
					<dt>孝女：</dt>
					<dd></dd>
					<dt>孝子：</dt>
					<dd></dd>
					<dt>爱孙：</dt>
					<dd></dd>
				</div>
			</dl>
			</section> </section>

			<!-- 评价 -->
			<section id="comment" class="main">
			<div class="spotlight">
				<div class="content">
					<header class="major">
					<h2>评价</h2>
					</header>
					<p>${relative.comments}</p>
				</div>
				<span class="image"><img src="<%relative.getPhoto();%>"
					alt="" /> </span>
			</div>
			</section>
		</div>

		<!-- Footer -->
		<footer id="footer"> <section> <img
			src="<%=path%>/images/qrcode.png"></img> </section> <section>
		<h2>云忆-让记忆永存</h2>
		<dl class="alt">
			<dt>微信：</dt>
			<dd>暂无</dd>
			<dt>电话：</dt>
			<dd>暂无</dd>
			<dt>邮箱：</dt>
			<dd>暂无</dd>
			<dt>官网：</dt>
			<dd>暂无</dd>
		</dl>
		</section>

		<p class="copyright">
			云忆公司 <a href="#">版权所有</a>
		</p>
		</footer>

	</div>

	<!-- Scripts -->
	<script src="assets/js/jquery.min.js"></script>
	<script src="assets/js/jquery.scrollex.min.js"></script>
	<script src="assets/js/jquery.scrolly.min.js"></script>
	<script src="assets/js/skel.min.js"></script>
	<script src="assets/js/util.js"></script>
	<!--[if lte IE 8]>
	<script src="assets/js/ie/respond.min.js"></script><![endif]-->
	<script src="assets/js/main.js"></script>

</body>
</html>